redesign(composer): neutral desktop plus-menu popover with in-place mode picker by BigSimmo · Pull Request #478 · BigSimmo/Database

BigSimmo · 2026-07-11T03:01:23Z

Summary

Fix the ≥1024px composer "+" popover cutting off its subtitle ("Clear the current thread" rendered as "C…"): the old header grid reserved 216px for the mode pill + 52px for close inside a 22rem popover, leaving ~60px for the subtitle.
Rebuild the popover header to the app's standard Sheet-header anatomy (Clinical White / Aegean direction, matching the ≤1023px sheet variant of this same menu): accent icon tile, mode title as the switcher trigger, subtitle on its own full-width line, toolbarButton close.
Replace the layered mode-switcher dropdown with an in-place body swap (renderPopoverBody). The old dropdown was clipped by the panel's overflow-hidden whenever the current mode had few action rows (e.g. Forms), leaving below-fold mode options unclickable.
Single anchor caret centred on the "+" trigger via --mode-action-caret-left (removes the duplicate JSX carets); popover widened 22rem → 24rem; deleted the teal-gradient header CSS and the unreachable ≤430px .mode-action-* rules (net −179 lines).
Test contract preserved: Open <mode> options trigger, daily-actions-menu role/menu structure, menuitem names ("Scope", "Upload PDF", "View evidence"), menuitemradio mode options, Escape/focus-restore behavior.

Verification

npm run verify:pr-local — blocked at its format:check step by a pre-existing local checkout artifact: prettier --check fails on CLAUDE.md + .claude/settings.json, which are byte-identical to origin/main (verified via git diff origin/main) and untouched by this PR. The two files this PR changes pass prettier. Constituent gates run individually below.
npm run verify:cheap — green post-merge with origin/main (runtime, actions-pins, sitemap, lint, typecheck, vitest 1476 passed / 1 skipped)
npm run verify:ui — full Chromium run green pre-merge (119 passed; 5 cold-compile navigation timeouts on routes untouched by this diff, all 5 pass on targeted re-run). Post-merge, re-ran the popover-relevant specs green: ui-smoke:1078 (desktop mode options close on outside click / scope open), ui-smoke:1119 (@critical demo answer flow), ui-accessibility reduced-motion + forced-colors (both drive the "+" menu → Scope).
npm run verify:release — not run (not a release/handoff claim)
npm run eval:retrieval:quality — N/A (no retrieval/ranking/selection/chunking/scoring change)
npm run eval:rag -- --limit 15 — N/A (no answer generation/synthesis/post-processing change)
npm run check:production-readiness — N/A (no clinical workflow/privacy/env/Supabase/source-governance change)
npm run check:deployment-readiness — N/A (no deployment change)

Additional targeted QA (Playwright script, 1280×800): opened the "+" menu in all 8 modes and asserted zero clipped header/subtitle/row text (scrollWidth ≤ clientWidth), light + dark schemes; in-place mode picker shows all 8 options with the last one scrollable and clickable (previously unreachable); Escape restores focus to the trigger.

Clinical Governance Preflight

Not required: this PR changes only the composer "+" menu presentation (one component + its CSS). No ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, or clinical output paths are touched.

Notes

The branch also carries 648abfa3f ("docs: align readiness runtime version"), which predates this session; its content is already on main (net file diff vs origin/main is empty), so this PR's effective diff is exactly the two files above.
origin/main was merged into the branch (clean, no conflicts) before push; the only overlapping file was globals.css in a distant token block.

🤖 Generated with Claude Code

…ode picker The >=1024px "+" popover header crushed its subtitle to an ellipsis (grid reserved 216px for the mode pill inside a 22rem surface) and still carried the legacy teal-gradient styling. Rebuild it to the Sheet header anatomy the mobile sheet already uses: accent icon tile, mode title as the switcher trigger, and the subtitle on its own full-width line so it can never truncate. - swap the layered mode dropdown for an in-place body swap; the old dropdown was clipped by the panel overflow when the current mode had few action rows, leaving below-fold modes unclickable - single anchor caret centred on the trigger via --mode-action-caret-left (removes the duplicate JSX carets); widen the popover 22rem -> 24rem - drop the gradient header CSS and the unreachable <=430px mode-action rules (the popover only renders >=1024px; smaller viewports use the Sheet) - keep renderPopoverBody in statement form: react-hooks/refs flags ref writes inside render helpers invoked from conditional JSX expressions Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…enu-design-1a4bb2

supabase · 2026-07-11T03:01:29Z

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

coderabbitai · 2026-07-11T03:01:52Z

📝 Walkthrough

Walkthrough

The mode-action popover now calculates caret placement from the trigger position, exposes it through a CSS variable, renders an in-place mode list, and simplifies related desktop and responsive styles.

Changes

Mode action popover

Layer / File(s)	Summary
Integrated caret layout `src/components/clinical-dashboard/mode-action-popup.tsx`, `src/app/globals.css`	Integrated surface geometry calculates a trigger-centered caret position, exposes `--mode-action-caret-left`, and uses it for both caret directions.
Popover mode rendering `src/components/clinical-dashboard/mode-action-popup.tsx`	The popover body switches between the mode list and action rows; desktop header controls, close-button styling, and responsive width are updated.
Mode-action styling surface `src/app/globals.css`	Focus-visible styling and scroll behavior remain, while obsolete header, menu, and small-screen overrides are removed.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Trigger
  participant ModeActionPopup
  participant IntegratedSurface
  Trigger->>ModeActionPopup: provide bounding rectangle
  ModeActionPopup->>ModeActionPopup: calculate caretLeft
  ModeActionPopup->>IntegratedSurface: set --mode-action-caret-left
  IntegratedSurface->>IntegratedSurface: position caret pseudo-element

Caution

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

Ignore

❌ Failed checks (1 error)

Check name	Status	Explanation	Resolution
Verification Claims	❌ Error	PR notes claim verification passed in vague terms like “passing cheap checks” and “full Chromium run green” without exact command/result wording.	Rewrite verification notes to name each exact command/check and outcome, e.g. “Ran npm run verify:cheap: passed” or “Not run: reason.”

✅ Passed checks (10 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the desktop composer popover redesign and in-place mode picker.
Description check	✅ Passed	The description follows the template with Summary, Verification, Clinical Governance Preflight, and Notes, and includes relevant test results.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Generated And Sensitive Files	✅ Passed	Only source files changed; no secrets, credentials, local artifacts, or generated paths were detected in the PR diff.
Risky Git Or Deployment Actions	✅ Passed	PR only changes CSS/TSX popover UI; no force-push, reset --hard, destructive clean, shared-branch rebase, or deployment/mutation instructions found.
Supabase Project And Schema Safety	✅ Passed	Diff is limited to UI popover/CSS changes; no Supabase project refs, env examples, migrations, RLS, or schema files were touched.
Runtime And Package Manager Integrity	✅ Passed	PR only changes two UI files; no package.json, lockfile, .npmrc, or runtime-policy files were touched, and repo still pins npm@11.17.0 with Node 24.x/engine-strict.
Api Route Failure Handling	✅ Passed	Diff is limited to a client-side popover/CSS; no API route, server action, RAG, search, ingestion, or provider code changed.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/desktop-plus-menu-design-1a4bb2

✨ Simplify code

Create PR with simplified code
Commit simplified code in branch claude/desktop-plus-menu-design-1a4bb2

_{Comment @coderabbitai help to get the list of available commands.}

BigSimmo and others added 3 commits July 10, 2026 21:54

docs: align readiness runtime version

648abfa

Merge remote-tracking branch 'origin/main' into claude/desktop-plus-m…

0e8752a

…enu-design-1a4bb2

BigSimmo merged commit f1d350c into main Jul 11, 2026
14 of 15 checks passed

BigSimmo deleted the claude/desktop-plus-menu-design-1a4bb2 branch July 11, 2026 03:07

coderabbitai Bot mentioned this pull request Jul 18, 2026

Polish and harden the global search composer across breakpoints #829

Merged

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

redesign(composer): neutral desktop plus-menu popover with in-place mode picker#478

redesign(composer): neutral desktop plus-menu popover with in-place mode picker#478
BigSimmo merged 3 commits into
mainfrom
claude/desktop-plus-menu-design-1a4bb2

BigSimmo commented Jul 11, 2026

Uh oh!

supabase Bot commented Jul 11, 2026

Uh oh!

coderabbitai Bot commented Jul 11, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Pre-merge checks failed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

BigSimmo commented Jul 11, 2026

Summary

Verification

Clinical Governance Preflight

Notes

Uh oh!

supabase Bot commented Jul 11, 2026

Uh oh!

coderabbitai Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Pre-merge checks failed

❌ Failed checks (1 error)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

coderabbitai Bot commented Jul 11, 2026 •

edited

Loading